<template>
  <div class="top-header">
    <div class="left-section">      
      <div class="page-title">{{getTitlePrefix}}</div>
    </div>
    <div class="header-actions">
      <div class="action-item">
        <el-icon><Bell /></el-icon>
        <div class="badge">5</div>
      </div>
      <div class="action-item">
        <el-icon><Message /></el-icon>
        <div class="badge">3</div>
      </div>
      <el-dropdown>
        <span class="admin-name">
          {{ username }} <el-icon><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>系统设置</el-dropdown-item>
            <el-dropdown-item divided @click="logout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted,computed } from "vue";
import {ElMessage} from 'element-plus';
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const store = useStore();

const username = ref(store.state.user?.username || "管理员");
//自定义属性标题
const props = defineProps({
  title: {
    type: String,
    default: "医生工作台",
  },
});

// 方法：截断标题前五个字符
const getTitlePrefix = computed(() => {
  return props.title.length > 5 ? props.title.slice(5) : props.title;
});

const logout = () => {
  // 清除本地存储的token
  localStorage.clear();
  // 重定向到登录页面
  router.push("/login");
  ElMessage.success("已安全退出系统");
};

</script>
<style lang="scss" scoped>
.top-header {
  background: white;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.left-section {
  display: flex;
  align-items: center;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.action-item {
  position: relative;
  cursor: pointer;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #f56c6c;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-name {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
}
</style>